import {$} from '../js/library/jquery.js';
import {cookie} from '../js/library/cookie.js';
import {querystring} from '../js/library/qs.js';

let shop = cookie.get('shop');

if (shop) {
  shop = JSON.parse(shop);

  let idList = shop.map(el => el.id).join();

  $.ajax({
    type: "get",
    url: "../../interface/getItems.php",
    data: { idList: idList },
    dataType: "json",
    success: function(res) {
        let temp = '';
        let count = 0;
        let totPrice = 0;

        res.forEach(elm => {
            let picture = JSON.parse(elm.picture);
            // 让ajax请求到的数据结果中遍历后的id与cookie中数据的id 相同
            let current = shop.filter(val => val.id == elm.id);

            temp += `
            <div class="con2">
            <div class="con2-1"><input type="checkbox" class="checkbox" checked/></div>
            <div class="con2-2">
              <img src="${picture[0].src}" alt="" />
              <ul>
                <li>
                  <p class="con2-p1">${elm.intro}</p>
                  <p class="con2-p2">${elm.type}</p>
                </li>
                <li>
                  <div class="con2-price">
                    <span>¥&nbsp;${parseFloat(elm.price).toFixed(2)}</span>
                  </div>
                </li>
                <li>
                  <div class="con2-num">
                    <button class="odd odd${elm.id}">-</button>
                    <input type="text" class="num num${elm.id}" value="${current[0].num}" />
                    <button class="add add${elm.id}">+</button>
                  </div>
                </li>
                <li class="price-total">¥${(elm.price * current[0].num).toFixed(2)}</li>
                <li>
                  <a href="javascript:;" class="con2-del" data-id="${elm.id}">删除</a>
                </li>
              </ul>
            </div>
          </div>
        `;

        count += parseInt(current[0].num);   // 总件数
        totPrice += elm.price * current[0].num;  // 总价格
      });

      // 删除一条购物车信息
      $('#main').html(temp).find('.con2-del').on('click', function() {
        let res = shop.filter(el => el.id != $(this).attr('data-id'));
        cookie.set('shop', JSON.stringify(res), 1);
        location.reload();
      });

      //全部删除按钮
      $('.con3-3>a').on('click',function(){
        cookie.set('shop', '', -1);
        location.reload();
      })

      // 取消勾选
      $('.checkbox').on('click',function(){
        $("input:checkbox:first").prop("checked", $(this).prop("checked"));
        $("input:checkbox:last").prop("checked", $(this).prop("checked"));
      })

      // 总价格
      $('.min-top>.span2').html(totPrice.toFixed(2));

      // 总件数
      $('.min-btm>.span4').html( count );
    }
  });
};

// 默认打开页面复选框就全选
$("input:checkbox").attr("checked","checked");
// 第一个、最后一个复选框 点击全选和全不选
$("input:checkbox:first").on("click", function () {
  $("input:checkbox:not(:first)").prop("checked", $(this).prop("checked"));
});
$("input:checkbox:last").on("click", function () {
  $("input:checkbox:not(:last)").prop("checked", $(this).prop("checked"));
});

// 加入数量
// $('#main').on('click',$(".add2"),function(){
//   $('.num2').val(+($('.num2').val())+1);
//   $('.odd2').css({
//     'color':'#777',
//     'cursor':'pointer'
//   });
// })
// 减少数量
// $('#main').on('click',$(".odd2"),function(){
//   $('.num2').val(+($('.num2').val())-1);
//   if($('.num2').val() <=1){
//     $('.odd2').css({
//       'color':'#c4c4c4',
//       'cursor':'not-allowed'
//     });
//     $('.num2').val(1);
//     $('.odd2').off('click');
//   }
// })

// 底部导航栏
// 右边角
$('.double>.sec>span:last-child').on('click',function(){
  $(this).css('cursor','not-allowed').siblings().css('cursor','pointer');

  $('.double>.ul1').animate({'margin-left':'-153px'},'normal');
})
// 左边角
$('.double>.sec>span:first-child').on('click',function(){
  $(this).css('cursor','not-allowed').siblings().css('cursor','pointer');
  
  $('.double>.ul1').animate({'margin-left':'0'},'normal');
})